<!DOCTYPE html>
<html lang="en">

<head>
  <title>My BCIT Project</title>
  <meta name="comp2800 template" content="My 2800 App">

  <!------------------------>
  <!-- Required meta tags -->
  <!------------------------>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!------------------------------------------>
  <!-- Bootstrap Library CSS JS CDN go here -->
  <!------------------------------------------>
  <link rel="stylesheet" href="./assets/css/style.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous">
    </script>

  <!-------------------------------------------------------->
  <!-- Firebase 8 Library related CSS, JS, JQuery go here -->
  <!-------------------------------------------------------->
  <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

  <!-------------------------------------------->
  <!-- Other libraries and styles of your own -->
  <!-------------------------------------------->
  <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
  <link rel="stylesheet" href="./styles/style.css">
  <link rel="stylesheet" href="./styles/index.css">
  <style>
    @font-face {
      font-family: 'Font1';
      src: url('./fonts/Conther-2.ttf') format('TrueType'),
        /* 支持现代浏览器 */

        /* 可以添加更多字体格式，以提高兼容性 */
    }

    @font-face {
      font-family: 'Font2';
      src: url('./fonts/SankeiCutePopanime-2.ttf') format('TrueType'),
        /* 支持现代浏览器 */

        /* 可以添加更多字体格式，以提高兼容性 */
    }

    @font-face {
      font-family: 'Font3';
      src: url('./fonts/Crystal-Regular-2.ttf') format('TrueType'),
        /* 支持现代浏览器 */

        /* 可以添加更多字体格式，以提高兼容性 */
    }
  </style>

</head>

<body>
  <!------------------------------>
  <!-- Your HTML Layout go here -->
  <!------------------------------>
  <div id="g-pointer-1"></div>
  <div id="g-pointer-2"></div>
  <div class="container">
    <!-- our own navbar goes here -->


    <br /><br /><br /><br />

    <nav class="navbar navbar-expand-lg navbar-dark  navbar-custom">
      <a class="navbar-brand" href="#">Food Travel</a>
      <div class="btn-login">
        <a href="./login.html" class="no-style">Login</a>
        <a href="./login.html" class="no-style">Sign-up</a>

      </div>
    </nav>
    <!-- our own cotent is here -->
    <section class="py-5 text-center container">
      <div class="row py-lg-5">
        <div class="col-lg-6 col-md-8 mx-auto">
          <p class="lead">Food • Healthy • Life</p>
          <svg>
            <text class="fw-light" x="0" y="70%" id="timelinetext"> FOOD</text>

            <text class="fw-light" x="20%" y="100%" id="timelinetext"> Travel</text>
          </svg>
          <div id="g-scroll"></div>
        </div>
      </div>
    </section>
    <br />
    <img class="bg3" src="./images/bg3.jpg" alt="Your Image">
    <br /><br /><br /><br />
    <div class="container max-width-adaptive-md margin-bottom-lg">
      <ul class="stack-cards js-stack-cards">
        <li data-theme="default" class="stack-cards__item bg radius-lg shadow-md js-stack-cards__item">
          <div class="grid">
            <div class="col-6 flex items-center height-100%">
              <div class="text-component padding-md ">
                <h2>Post</h2>
                <p class="display@xs">In the food practice software, you can share or record the calories you consume
                  each time you eat food with friends.</p>
                <p><a href="#0" class="btn btn--accent">Read more</a></p>
              </div>
            </div>

            <div class="col-6 height-100%">
              <img class="block width-100% height-100% object-cover" src="./images/chip.jpg"
                alt="Image description">
            </div>
          </div>
        </li>

        <li data-theme="default" class="stack-cards__item bg radius-lg shadow-md js-stack-cards__item">
          <div class="grid">
            <div class="col-6 flex items-center height-100%">
              <div class="text-component padding-md ">
                <h2>Add</h2>
                <p class="display@xs">In the food practice software, you can record your daily intake of sugar by adding
                  methods</p>
                <p><a href="#0" class="btn btn--accent">Read more</a></p>
              </div>
            </div>

            <div class="col-6 height-100%">
              <img class="block width-100% height-100% object-cover" src="./images/bread.jpg"
              alt="Image description">
                alt="Image description">
            </div>
          </div>
        </li>

        <li data-theme="default" class="stack-cards__item bg radius-lg shadow-md js-stack-cards__item">
          <div class="grid">
            <div class="col-6 flex items-center height-100%">
              <div class="text-component padding-md ">
                <h2>History</h2>
                <p class="display@xs">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                <p><a href="#0" class="btn btn--accent">Read more</a></p>
              </div>
            </div>

            <div class="col-6 height-100%">
              <img class="block width-100% height-100% object-cover" src="./images/bg2.jpg" alt="Image description">
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>





  <!-- the body of your page goes here -->
  <!-- stuff -->

  <!-- our own footer goes here-->


  <!---------------------------------------------->
  <!-- Your own JavaScript functions go here    -->
  <!---------------------------------------------->

  <!-- <script src="./scripts/script.js"></script> -->

  <script src="./scripts/logout.js"></script>
  <script src="./assets/js/scripts.js"></script>
  <!-- <script>
        logout();
    </script> -->
  <script src="./scripts/skeleton.js"></script>
</body>

</html>